<template>
  <div class="detail">
    <el-button
      class="btn_back"
      type="primary"
      plain
      icon="el-icon-d-arrow-left"
      @click="backLastPage"
      >返回</el-button
    >
    <h2>{{ this.$route.query.problemName }}</h2>
    <h3>
      {{
        this.$route.query.studentClass +
          "  " +
          this.$route.query.userId +
          "  " +
          this.$route.query.userName
      }}
    </h3>
    <el-table
      size="medium"
      :data="tableData"
      v-loading="tableLoading"
      border
      stripe
      style="width: 100%"
    >
      <template slot="empty">
        <span>暂无数据~~~</span>
      </template>
      <el-table-column
        v-for="(item, index) of columnList"
        :key="index"
        align="center"
        :label="item.label"
        :prop="item.prop"
        :min-width="item.minWidth"
        fixed
      >
      </el-table-column>
      <el-table-column
        prop="status"
        align="center"
        label="状态"
        min-width="100px"
        fixed
      >
        <template v-slot="{ row }">
          <el-tag v-if="row.status === 'PASS'" type="success">通过</el-tag>
          <el-tag v-else-if="row.status === 'FAIL'" type="warning"
            >未通过</el-tag
          >
          <el-tag v-else type="warning">未作答</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="220">
        <template slot-scope="scope">
          <el-button
            @click="handleClick(scope.row)"
            type="text"
            size="small"
            icon="el-icon-search"
            >查看最近提交</el-button
          >
          <el-dialog
            title="查看最近提交代码"
            :visible.sync="dialogVisible"
            width="70%"
            append-to-body
          >
            <div class="code-text">
              <codeHeightLight :sourceCode="sourceCode" />
            </div>
            <span slot="footer" class="dialog-footer">
              <el-tag type="primary" @click="dialogVisible = false"
                >确 定</el-tag
              >
            </span>
          </el-dialog>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import codeHeightLight from "@/components/codeHighlight.vue";
import { columnList } from "./config/viewdetail.js";
import {
  getExperimentProblemResultByUserIdAndExperiment,
  getFinallyCode
} from "@/api/viewResults";

export default {
  name: "viewDetail",
  components: {
    codeHeightLight
  },
  data() {
    return {
      userId: null,
      experimentId: null,
      columnList,
      tableLoading: false,
      tableData: [],
      sourceCode: "",
      dialogVisible: false
    };
  },

  created() {
    this.userId = this.$route.query.userId;
    this.experimentId = this.$route.query.problemId;
    this.getExperimentProblemResult();
  },
  methods: {
    // 返回上一层页面
    backLastPage() {
      this.$router.go(-1);
    },
    handleClick(row) {
      this.dialogVisible = true;
      this.tableLoading = true;
      this.sourceCode = "";
      getFinallyCode({
        experimentId: this.experimentId,
        problemId: row.problemId,
        userId: this.userId
      })
        .then(res => {
          this.sourceCode = res.data;
        })
        .catch(() => {
          this.$message.error("获取最近一次提交代码失败");
        })
        .finally(() => {
          this.tableLoading = false;
        });
    },
    // 获取题目表格
    getExperimentProblemResult() {
      this.tableLoading = true;
      getExperimentProblemResultByUserIdAndExperiment({
        userId: this.userId,
        experimentId: this.experimentId
      })
        .then(res => {
          this.tableData = res.data;
        })
        .catch(() => {
          this.$message.error("获取信息失败");
        })
        .finally(() => {
          this.tableLoading = false;
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.detail {
  position: relative;
}
h2 {
  font-size: 26px;
}
h3 {
  font-size: 18px;
}
.el-table {
  margin-top: 0.1rem;
  margin-bottom: 0.1rem;
}
.dialog-footer {
  cursor: pointer;
}
.code-text {
  white-space: pre;
  font-size: 20px;
}
.btn_back {
  width: 100px;
  height: 50px;
  font-size: 18px;
  position: absolute;
  left: 30px;
  top: -10px;
  border-radius: 10px;
}
</style>
